<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div class="nav">
        <div class="nav-top center">
            <div class="nav-left">
                <a href="#">小米网</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">MIUI</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">米聊</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">游戏</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">多看阅读</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">云服务</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">小米网移动版</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">Select region</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">米粉节答疑</a>  
            </div>
            <div class="nav-right">
                <a href="#">注册</a>&nbsp;&nbsp;
                <span>|</span>&nbsp;&nbsp;
                <a href="#">登录</a>
            </div>
        </div>
        
    </div>
    <div class="search center">
        <div class="logo">
        </div>
        <div class="tip">4月14日开放购买</div>
        <div class="search-box">
            <div>
                <span>小米手环</span>
                <span>耳机音响</span>
                <span>保护壳</span>
            </div>
            
            <input type="text" placeholder="搜索您需要的商品">
            <button class="fangdajing"></button>
            <button class="gouwuche">购物车</button>
        </div>
    </div>
    <div class="goods center">
        <div class="goods-left">
            <div>
                 <a href="#">全部商品分类</a>
            </div>
           
            <ul>
                <li class="ul-title"><a href="#">购买手机</a></li>
                <li>小米Noto &nbsp;小米4 &nbsp;红米 &nbsp;红米Noto</li>
            </ul>
            <ul>
                <li class="ul-title"><a href="#">购买电视和平板</a></li>
                <li>小米电视 &nbsp;小米盒子 &nbsp;小米平板</li>
            </ul>
            <ul>
                <li class="ul-title"><a href="#">路由器与智能硬件</a> </li>
                <li>路由器 &nbsp;体重秤 &nbsp;净化器与滤芯</li>
            </ul>
            <ul>
                <li class="ul-title"><a href="#">插线板、移动电源与电池</a></li>
                <li>小米移动电源 &nbsp;电池 &nbsp;充电器</li>
            </ul>
            <ul>
                <li class="ul-title"><a href="#">耳机音响与存储卡</a></li>
                <li>小米头戴式耳机 &nbsp;小米活塞耳机</li>
            </ul>
            <ul>
                <li class="ul-title"><a href="#">保护套与贴膜</a></li>
                <li>保护套/保护壳 &nbsp;贴膜 &nbsp;防尘塞 </li>
            </ul>
            <ul>
                <li class="ul-title"><a href="#">后盖与个性化配件</a></li>
                <li>米健 &nbsp;后盖 &nbsp;贴纸 &nbsp;手机支架</li>
            </ul>
            <ul>
                <li class="ul-title"><a href="#">小米生活方式</a></li>
                <li>服装 &nbsp;米兔 &nbsp;背包 &nbsp;生活周边</li>
            </ul>

        </div>
        <div class="goods-right">
            <div class="goods-nav">
                <ul>
                    <li><a href="#">首页</a> </li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">小米平板</a></li>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">盒子</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">合约机</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="picture">
                <div id="list">
                    <img src="images/banner5.png" alt="">
                    <img src="images/banner2.png" alt="">
                    <img src="images/banner3.png" alt="">
                    <img src="images/banner4.png" alt="">
                    <img src="images/banner1.png" alt="">
                </div>
                <div id="btns">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
            </div>
            <div class="pic-botton">
               <ul>
                   <li class="one"></li>
                   <li class="two"></li>
                   <li class="three"></li>
               </ul>
            </div>
        </div>
    </div>
    <div class="single-item center">
        <div class="single-tip">
            <p>小米明星单品<span>根据机型选配件</span></p>
            <button class="btn-one"></button>
            <button class="btn-two"></button>
        </div>
        
        <div class="single-content">
            <div class="chazuo  single">
                <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="">
                <p single-title>小米智能插座</p>
                <span>让普通家电变得智能</span>
            </div>
            <div class="jinghuaqi single">
                <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="">
                <p single-title>小米空气净化器</p>
                <span>高性能智能空气净化器立即预约</span>
            </div>
            <div class="erji single">
                <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="">
                <p single-title>小米活塞耳机简装版</p>
                <span>好声音源自活塞式音腔，延续经典设计</span>
            </div>
            <div class="luyouqi single">
                <img src="images/aa.jpg" alt="">
                <p single-title>小米路由器</p>
                <span>顶级双屏幕AC智能路由器，内置1TB大硬盘</span>
            </div>
        </div>
    </div>
    <div class="new-products center">
        <p class="xin">新品上架<span></span><a href="#">更多&gt;</a></p>
        <div class="new-content">
            <div class="new-right">
                <div class="chucunka co-del">
                    <div class="tejia">特价商品</div>
                    <div class="right-detail">
                        <p class="new-title">SanDisk32GB存储卡</p>
                        <p class="price">79元<span>109元</span></p>
                        <p>还有更多特价商品</p>
                    </div>
                    <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                </div>
                <div class="peijian co-del">
                    <div class="right-detail">
                        <p class="new-title">特惠配置套餐</p>
                        <p>手机必备配件组合购买</p>
                        <p>实惠更优惠</p>
                    </div>
                    <img src="images/channel-list-cool.jpg" alt="">
                </div>
                <div class="kuwan co-del">
                    <div class="right-detail">
                        <p class="new-title">我爱酷玩</p>
                        <p>邂逅炫酷的电子产品</p>
                        <p>结交趣味相投的朋友</p>
                    </div>
                    <img src="images/channel-list-new.jpg" alt="">
                </div>
                <div class="right-botton">
                    <div class="jump">
                        <div><a href="#">企业用户采购通道</a><span>&gt;</span></div>
                        <div><a href="#">小米手机防伪查询</a><span>&gt;</span></div>
                        <div><a href="#">小米手机官翻版</a><span>&gt;</span></div>
                        <div><a href="#">小米路由器官翻版</a><span>&gt;</span></div>
                        <div><a href="#">米粉红包</a><span>&gt;</span></div>
                    </div>
                    <div class="chongzhi">
                        <p>话费充值</p>
                        <input type="text" placeholder="请输入手机号">
                        <select id="prices">
                            <option value="100元" defualt>100元</option>
                            <option value="200元">200元</option>
                            <option value="500元">500元</option>
                            <option value="1000元">1000元</option>
                            <option value="renyi">自定义金额</option>
                        </select>
                        <p class="chongzhi-tip">实付价格98.4元起</p>
                        <button>立即充值</button>
                    </div>
                </div>
            </div>
            <div class="new-left">
                <div class="yinxiang">
                    <img src="images/fanghezi0407xiao.jpg" alt="">
                </div>
                <div class="shouhuan show">
                    <div class="left-tip">
                        <span class="first">小米手环</span></br>
                        <span>79元</span>
                    </div>
                    <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
                </div>
                <div class="left-middle">
                                    <div class="left-second">
                        <div class="yaoshikou">
                            <div>
                                <span class="first">5周年兔钥匙扣</span></br>
                                <span>9.9元</span>
                            </div>
                            <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg" alt="">
                        </div>
                        <div class="qcy">
                            <div>
                                <span class="first">QCY派Q8蓝牙耳机</span></br>
                                <span>59.9元</span>
                            </div>
                            <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                        </div>
                    </div>
                    <div class="T-shirt">
                        <div class="rest">
                            <span class="first">小米T恤路标MILOGO</span><br>
                            <span>39元</span>
                        </div>
                        <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
                    </div>
                    <div class="hougai">
                        <div class="rest">
                            <span class="first">小米4实木后盖</span><br>
                            <span>69元</span>
                        </div>
                        <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">
                    </div>
                </div>
  
                <div class="left-rest">
                        <div class="baohuke">
                        <div class="rest">
                            <span class="first">小米Node超薄保护壳</span><br>
                            <span>49元</span>
                        </div>
                        <img src="images/baohuke.png" alt="">
                    </div>
                    <div class="zipaigan">
                        <div class="rest">
                            <span class="first">小米自拍杆</span><br>
                            <span>49元</span>
                        </div>
                        <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
                    </div>
                    <div class="xianfeng">
                        <div class="rest">
                            <span class="first">先锋CL31系列耳式耳机</span><br>
                            <span>99元</span>
                        </div>
                        <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <div class="botton">
        <div class="botton-top center">
            <div class="kuaixiu server">
                <img src="images/10.png" alt=""><br>
                <span>1小时快修服务</span>
            </div>
            <div class="tuihuo server">
                <img src="images/11.png" alt=""><br>
                <span>7天无理由退货</span>
            </div>
            <div class="huanhuo server">
                <img src="images/12.png" alt=""><br>
                <span>15天免费换货</span>
            </div>
            <div class="baoyou server">
                <img src="images/13.png" alt=""><br>
                <span>满150元包邮</span>
            </div>
            <div class="shouhou server">
                <img src="images/14.png" alt=""><br>
                <span>520余家售后网点</span>
            </div>
        </div>
        <div class="botton-middle center" >
            <div class="help-center tips">
                <p class="middle-title">帮助中心</p>
                <a href="">购物指南</a><br>
                <a href="">支付方式</a><br>
                <a href="">配送方式</a>
            </div>
            <div class="service-support tips"">
                <p class="middle-title">服务支持</p>
                <a href="">售后政策</a><br>
                <a href="">自动服务</a><br>
                <a href="">相关下载</a>
            </div>
            <div class="mi-home tips"">
                <p class="middle-title">小米之家</p>
                <a href="">小米之家</a><br>
                <a href="">服务网站</a><br>
                <a href="">预约亲临到店服务</a>
            </div>
            <div class="about-mi tips"">
                <p class="middle-title">关于小米</p>
                <a href="">了解小米</a><br>
                <a href="">加入小米</a><br>
                <a href="">联系我们</a>
            </div>
            <div class="about-us tips"s">
                <p class="middle-title">关于我们</p>
                <a href="">新浪微博</a><br>
                <a href="">小米部落</a><br>
                <a href="">官方微博</a>
            </div>
            <div class="customer-service">
                <p class="telephone">400-100-5678</p>
                <span>周一至周五8:00-18:00</span><br>
                <span>(仅收市话费)</span>
                <div class="online">24小时在线客服</div>
            </div>
        </div>
        <div class="last center">
            <div class="mi-website">
                <span>小米旗下网站&nbsp;:&nbsp;</span>
                <a href="#">小米网</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">MIUI</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">米聊</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">多看书城</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">小米路由器</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">繁体香港</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">繁体台湾</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">English</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">小米后院</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">小米天猫店</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">小米淘宝直营店</a>&nbsp;
                <span>|</span>&nbsp;
                <a href="#">小米网盟</a>
            </div> 
            <p>©mi.com &nbsp;京ICP证110507号 &nbsp;京ICP备10046444号 &nbsp;京公网安备1101080212535号 京网文[2014]0059-0009号</p>
            <div class="language-select center">
                <div>
                    <img src="images/16.png" alt="">
                </div>
                
                <select name="language" id="language">
                    <option value="简体中文">简体中文</option>
                    <option value="English">English</option>
                    <option value="繁体中文">繁体中文</option>
                </select>
            </div>
        </div>
        
    </div>
    <script>
        $(function(){
                $("#btns span").click(function(){
                let i =$(this).index();
                console.log(i);
                $("#list img").eq(i).fadeIn().siblings().fadeOut();
                $("#btns span").eq(i).addClass("current").siblings().removeClass("current");

            })
        })        
    </script>
</body>
</html>